<template>
  
    <!-- App -->
    <div id="app2" class="tinymce-editor">
      <!-- <textarea id="tinydemo"  v-model="contentx">这里是默认文字。</textarea> -->
         <vue-tinymce   id="tinydemo" :setting="setting"  :content="contentx"    v-model="contentx"    ref="editor" 
        class="editor overflow-scroll"   @input="$emit('update:modelValue', 'aaaaaaaa33333')" /> 
    </div>
    <div  v-html='contentx'></div>
    <el-button type="primary" @click="handleEdit(editor)">提交</el-button>
</template>

<script>
 import tinymce from 'tinymce/tinymce'
 import { reactive,ref } from 'vue'
 import { uploadImg} from '../api/uploadfile.js'
 import { dataType } from 'element-plus/es/components/table-v2/src/common';

//富文本编辑器
  export default{
   name:'test8',
   setup(props ,ctx){
      const editor = ref();
      let contentx = ref('aaaaddddd');
      const setting = reactive( {height: 500, language: 'zh-Hans',
      statusbar: false,menubar:'',promotion:false,
      plugins:'emoticons image link table code',
      toolbar:'bold italic underline strikethrough|emoticons image link table|code help' ,
      images_upload_url: 'http://localhost:8082/lxhotel/uploadServlet.do',
      init_instance_callback:function(editor ){
        editor.focus();
        editor.on('input',(e,c)=>{
           
          console.log('e.target.innerTHML',e.target.innerHTML);
          ctx.emit('input',e.target.innerHTML)
        })
      }
    });
   
     function handleEdit(hedit){
        //  hedit.triggerSave();//同步文本编辑器的内容
        // hedit.$forceUpdate();
        // hedit.resetContent();
        // contentx = '333333333aaaaaaaa';
        console.log('hedit',hedit.const);
        console.log('contentx',contentx);
     }
      return {
        contentx,
        setting,
        handleEdit,
        editor
      }
   }

}
</script>

<style  scoped>
.tinymce-editor {
  padding: 20px;
  position: relative;
  .editor {
    padding: 10px;
    border: 1px solid #ddd;
    height: 410px;
    font-size: 16px;
    line-height: 1.4;
    overflow-y: scroll;
  }
}
</style>